<template>
  <div class="wrap">
    <div class="addrItemLine">
      <div class="title">收货人</div>
      <div class="inputText">
        <input type="" name="" v-model="formData.nickName" placeholder="请输入姓名" />
      </div>
    </div>
    <div class="addrItemLine">
      <div class="title">联系电话</div>
      <div class="inputText">
        <input
          type=""
          name=""
          v-model="formData.phone"
          maxlength="11"
          placeholder="请输入联系电话"
        />
      </div>
    </div>
    <!-- <router-link :to="{ name:'schoolList' }"> -->
    <div class="addrItemLine" @click="jumpSchoolList">
      <div class="title">选择学校</div>
      <div class="inputText">
        <input
          type=""
          name=""
          :value="chooseSchoolData ? chooseSchoolData.schoolIName : '请选择学校'"
          placeholder=""
          class="leftInput"
          style="width: 80%"
        />
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
    </div>
    <!-- </router-link> -->
    <div class="addrItemLine">
      <div class="title">收货地址</div>
      <div class="inputText">
        <input
          type=""
          name=""
          v-model="formData.detailsAddress"
          placeholder="请输入收货地址"
        />
      </div>
    </div>

    <div class="title">选择学校</div>
    <div class="inputText inputTextAddr">
      <em class="setDefultAddr">设为默认地址</em>
      <div class="switch">
        <van-switch
          v-model="checked"
          size="18px"
          active-color="#181818"
          inactive-color="#dbdcdd"
          @change="changeStatus"
        />
      </div>
    </div>
    <div class="title deleAddr" @click="deleAddr()" v-if="editAddrItem">删除收货地址</div>
    <div class="save" @click="getInsetAppUserAddress">保存</div>
  </div>
</template>

<script>
import { regex } from "@/assets/js/identyRules.js";
import { Switch, Dialog } from "vant";
import {
  apiInsetAppUserAddress,
  apiDeleteAppUserAddress,
  apiUpdateAppUserAddress,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      value: "",
      checked: false,
      chooseSchoolData: "",
      reqShopId: this.$route.query.shopId, //店铺id
      // addrId: this.$route.query.addrId, //从地址列表选择的要编辑的地址item
      isHaveAddr: this.$route.query.isHaveAddr, //0非默认，1默认
      formId: this.$route.query.formId, //0来至创建订单页
      formData: {
        detailsAddress: "",
        phone: "",
        nickName: "",
      },
      editAddrItem: this.$route.query.editAddrItem,
    };
  },

  mounted() {
    console.log("isHaveAddrDD", this.isHaveAddr);
    this.chooseSchoolData = this.$route.query.chooseSchoolData;
    //解析已经填好的地址信息，避免选择完校区前面填写的信息清空了：
    var addrData = JSON.parse(sessionStorage.getItem("addrData"));
    if (addrData) {
      this.formData = addrData;
    }
    //上一页编辑跳转来的 将编辑的信息填充好：
    var editAddrItem = this.editAddrItem;
    if (editAddrItem) {
      this.formData.detailsAddress = editAddrItem.detailsAddress;
      this.formData.phone = editAddrItem.mobile;
      this.formData.nickName = editAddrItem.nickName;
      editAddrItem.status == 0 ? (this.checked = false) : (this.checked = true);
      var obj = {
        schoolIName: editAddrItem.schoolName,
        schoolId: editAddrItem.addressId,
      };
      var routerData = this.$route.query.chooseSchoolData;
      routerData ? (this.chooseSchoolData = routerData) : (this.chooseSchoolData = obj); //如果没有重新选择校区 那么就用原来编辑的校区 如果重新选择了校区那么就用最新选择的校区数据
      console.log("chooseSchoolData222", this.chooseSchoolData);
    }

    // console.log("schoolId", this.chooseSchoolData, this.isHaveAddr);
  },
  methods: {
    jumpSchoolList() {
      sessionStorage.setItem("addrData", JSON.stringify(this.formData)); //缓存数据 选择完校区 返回页面保留已经填写的数据
      this.$router.push({
        path: "/pages/schoolList",
        query: { fromId: this.formId, isHaveAddr: this.isHaveAddr,shopId:this.reqShopId },
      });
    },
    changeStatus(value) {
      // console.log("开关状态", value);
    },
    //添加用户收货地址：
    getInsetAppUserAddress() {
      if (
        !this.chooseSchoolData.schoolId ||
        !this.formData.detailsAddress ||
        !this.formData.phone ||
        !this.formData.nickName
      ) {
        this.$Toast.fail("请填写完整的收货信息");
        return;
      }
      if (!regex.phone.test(this.formData.phone)) {
        this.$toast.fail("请输入正确的手机号");
        return;
      }
      var statusId = "";
      if (this.isHaveAddr == 1) {
        //地址为空，必定为默认 （这种做法的原因是保障 用户首次进来没有设置默认地址，首页数据展示必须要有一个默认地址）
        statusId = 1;
      } else {
        console.log("this.checked", this.checked);
        statusId = this.checked ? 1 : 0; //是否默认地址 用户手动选择
      }
      if (!this.editAddrItem) {
        // 添加收货信息：
        apiInsetAppUserAddress({
          addressId: this.chooseSchoolData.schoolId,
          detailsAddress: this.formData.detailsAddress,
          mobile: this.formData.phone,
          nickName: this.formData.nickName,
          status: statusId,
        }).then((res) => {
          console.log(333);
          if (res.code == 200) {
            console.log("添加收货信息", res, this.isHaveAddr);
            this.$Toast.success("设置成功!");
            if (this.isHaveAddr == 1) {
              // window.location.href = `/`;
              console.log(222);
              this.$router.push({
                path: "/",
                replace: true,
              });
            } else if (this.formId == 0) {
              // this.$router.go(-3);
              this.$router.push({
                path: "/pages/orderSure",
                query: {
                  shopId:this.reqShopId
                },
              });
              var name = this.chooseSchoolData.schoolIName+this.formData.detailsAddress
              console.log(name);
              // 详细地址
              sessionStorage.setItem('paySureAddrName',name)
            } else {
              console.log(333);
              this.$router.push({
                path: "/pages/reciveAddrList",
                replace: true,
              });
            }
          }
        });
      } else {
        //编辑收货信息：
        apiUpdateAppUserAddress({
          addressId: this.chooseSchoolData.schoolId,
          detailsAddress: this.formData.detailsAddress,
          id: this.editAddrItem.id,
          mobile: this.formData.phone,
          nickName: this.formData.nickName,
          status: statusId,
        }).then((res) => {
          if (res.code == 200) {
            console.log("添加收货信息", res);
            this.$Toast.success("设置成功!");
            if (this.formId == 0) { 
              // this.$router.go(-2);
              this.$router.push({
                path: "/pages/reciveAddrList",
                query: {
                  shopId:this.reqShopId
                },
              });
            } else {
              this.$router.push({
                path: "/pages/reciveAddrList",
                replace: true,
              });
            }
          }
        });
      }
    },
    //删除地址：
    deleAddr() {
      var that = this;
      Dialog.confirm({
        message: "确认该地址删除?",
      })
        .then(() => {
          // on confirm
          apiDeleteAppUserAddress({
            id: this.editAddrItem.id,
          }).then((res) => {
            if (res.code == 200) {
              that.$Toast.success("已删除");
              that.$router.push({
                path: "/pages/reciveAddrList",
                replace: true,
              });
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    onSearch() {},
  },

  created() {},
  components: {
    [Switch.name]: Switch,
    [Dialog.name]: Dialog,
  },
};
</script>

<style scoped>
.wrap {
  min-height: calc(100vh + 30px);
  background-color: #f2f4fa;
  width: 100%;
}
.title {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #181818;
  padding-top: 25px;
  padding-left: 20px;
}
.inputText {
  width: 93%;
  margin: 0 auto;
  height: 44px;
  line-height: 44px;
  background: #ffffff;
  border-radius: 22px;
  margin-top: 15px;
}
input {
  border: 0px;
  margin-left: 20px;
  font-size: 14px;
  color: #000;
  border-radius: 22px;
  width: 91%;
}
input::placeholder {
  font-size: 14px;
  color: #999;
}
.leftInput {
  float: left;
}
.rightArrow {
  float: right;
  width: 5px;
  height: 9px;
  margin-top: 20px;
  margin-right: 15px;
}

.save {
  height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 50px;
  width: 93%;
  text-align: center;
  margin: 30px auto;
}
.inputTextAddr {
  height: 54px;
  line-height: 54px;
  background: #ffffff;
  border-radius: 20px;
}
.setDefultAddr {
  float: left;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #181818;
  margin-left: 15px;
}
.switch {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}
.deleAddr {
  font-size: 13px;
  font-weight: 400;
  color: #f48f5b;
}
</style>
